<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .animation {
            width: 10px;
            height: 10px;
            border: 1px solid red;
            animation: move 2s linear infinite alternate;
            animation-play-state: paused;
        }

        @keyframes move {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(200px);
            }
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="btn stop">stop</div>
        <div class="btn play">play</div>
    </div>
    <div class="animation"></div>

    <script>
        var stop = document.querySelector(".stop");
        var play = document.querySelector(".play");
        var move = document.querySelector(".animation");
        stop.addEventListener("click",function(){
            move.style["animationPlayState"] = "paused";
        })
        play.addEventListener("click",function(){
            move.style["animationPlayState"] = "running";
        })
    </script>
</body>

</html>